<template>
  <div id="app" style="height: 100%;">
  
    <transition :name="transitionName">
    <router-view class="app-view"></router-view>
    </transition>
   
    <tabbar>
<tabbar-item selected :link="{path:'/'}" :selected="$route.path === '/'">
 <img slot="icon" src="./assets/icon_nav_button.png">
 <span slot="label">首页</span>
 </tabbar-item>
<tabbar-item show-dot :link="{path:'/category'}" :selected="$route.path === '/two'">
  <img slot="icon" src="./assets/icon_nav_cell.png">
  <span slot="label">分类</span>
  </tabbar-item>
  <tabbar-item  :link="{path:'/three'}" :selected="$route.path === '/three'">  <img slot="icon" src="./assets/icon_nav_article.png">
  <span slot="label">购物车</span>
  </tabbar-item>
  <tabbar-item badge="2" :link="{path:'/four'}" :selected="$route.path === '/four'">  
  <img slot="icon" src="./assets/icon_nav_cell.png">
<span slot="label">个人中心</span>
</tabbar-item>
  </tabbar>
  </div>
</template>

<script>
import { Tabbar, XHeader, ViewBox, TabbarItem } from 'vux'
export default {
  name: 'app',
  components: {
    Tabbar,
    XHeader,
    ViewBox,
    TabbarItem
  },
  created () {

  },
  data () {
    return {
      transitionName: 'slide-left'
    }
  },
  watch: {
    '$route' (to, from) {
      this.transitionName = to.path !== '/category' ? 'slide-right' : 'slide-left'
    }
  },
  computed: {
    leftOptions () {
      return {
        showBack: this.$route.path !== '/'
      }
    },
    headerTransition () {
      return this.direction === 'forward' ? 'vux-header-fade-in-right' : 'vux-header-fade-in-left'
    },
    title () {
      if (this.$route.path === '/') return 'Home'
      if (this.$route.path === '/two') return 'two'
      if (this.$route.path === '/three') return 'three'
      if (this.$route.path === '/four') return 'four'
    }
  }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';

body {
  background-color: #fbf9fe;
}
html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }
  .weui-tab__panel{ padding: 46px 0 60px 0;}
</style>
